<template>
  <div class="experimental flex-column">
    <div class="content flex-box" v-if="experimentalData.length">
      <div v-for="item in experimentalData" class="data-box flex-column-center">
        <span class="value">{{item.value}}</span>
        <span class="name">{{item.attribute}}</span>
      </div>
    </div>
    <div v-else class="no-data mt-100">暂无数据</div>
  </div>
</template>
<script>
  import {experimentalData} from '../../../../api/api'

  export default {
    name:'experimental',
    props:{

      params:{
        type:Object,
        default:()=>{}
      }
    },

    data(){
      return{
        experimentalData:[]
      }
    },
    methods:{
      getData(){
        if(this.params.type === 'experimental'){
          experimentalData({id:this.params.id}).then(res=>{
            this.experimentalData = res
          }).catch(er=>{
            this.$message.error(er)
          })
        }

      }
    }
  }
</script>
<style lang="scss" scoped>
  .experimental{
    height: 100%;
    padding:20px 40px 20px 17px;
    .content{
      .data-box{
        width: 163px;
        height: 102px;
        background: url("../../../../assets/imgs/exper_bg.png")no-repeat;
        background-size: 100% 100%;
        justify-content: center;

        .value{
          font-family: number-font;
          font-size: 30px;
          color: #fff;
          font-style: italic;
        }
        .name{
          color: rgba(255,255,255,0.59);
          font-size: 18px;
        }
      }
      .data-box+.data-box{
        margin-left: 27px;
      }
    }
  }
</style>
